<template>
  <el-form ref="form" :model="form" label-width="90px" class="kxz-callLog__form--back">
    <el-form-item label="计划时间:">
      <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间" :picker-options="pickerOptions0" :class="$style.datepicker">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="备注:">
      <el-input type="textarea" v-model="form.content" :maxlength="300" placeholder="请输入通话内容(限制在300字以内)"></el-input>
    </el-form-item>
    <p class="savePara">
      <el-button type="primary" @click="handleSave">保存生效</el-button>
    </p>
  </el-form>
</template>

<script>
// import {utils} from '../../../../../config/mixin.js'
import { dateFormat } from 'vux'

export default {
  name: 'log-form',
  data() {
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      form: {
        date: '',
        content: '',
      },
      opts: {
        que: [
          { value: 0, label: '投资续投类' },
          { value: 1, label: '红包活动类' },
          { value: 2, label: '意见建议类' },
          { value: 3, label: '服务咨询类' },
        ]
      }
    }
  },
  methods: {
    handleSave() {
      const form = this.form
      if (form.date === ''){
        this.$warn('请选择计划时间')
        return
      }
      // 备注非必填
      // if (form.content === ''){
      //   this.$warn('请填写备注')
      //   return
      // }
      this.postBack()
    },
    async postBack(){
      // 添加回访计划参数有问题
      try{
        const {sessionId} = this.$store.getters.getUserInfo
        const {mobile, telMsg} = this.$store.getters.callMsg
        let {date,content} = this.form
        date = dateFormat(date, 'YYYY-MM-DD HH:mm:ss')
        // const {cU_ser,dh} = this.$store.getters.telMsg
        const {cU_ser,dh} = telMsg
        const {data} = await this.$get(this,{
          api:'ajaxapi/addHfjl.do',
          data:{
            userName:cU_ser,
            sessionId,
            tel: mobile,
            hftime:date,
            beizhu:content,
            danhaoid:dh,
          }
        })
        if(data.state === 0 && data.content === true){
          this.$toast({
            message:'添加成功'
          })
          this.form = {
            date:'',
            content:'',
          }
          return
        }
        this.$warn('添加失败')
      }catch(e){
        this.$warn('系统接口ajaxapi/addHfjl.do报错')
      }
    }
  }
}
</script>

<style lang="scss" module>
.datepicker{
  width:322px !important;
}
</style>

<style lang="scss">
$bdColor: #dddfe6;
$color: #444;
$inputbgColor:#fafbfc;
$inputColor:#7b8897;
.kxz-callLog__form--back {
  padding: 0 20px 30px;
  border: 1px solid $bdColor;
  border-top: none;
  .el-form-item {
    margin-bottom: 30px;
  }
  .el-form-item__label {
    font-size: 16px;
    color: $color;
    text-align: left;
  }
  .el-input__inner,
  .el-textarea__inner {
    background: $inputbgColor;
    color: $inputColor;
  }
  .el-textarea__inner {
    height: 100px;
    border-color: $bdColor !important;
  }
  // .el-input__inner {
  //   width: 322px;
  //   height: auto;
  //   padding: 10px 35px 11px 19px;
  //   border-color: $bdColor !important;
  // }
  .savePara {
    text-align: center;
  }
  .el-button {
    padding: 12px 45px;
  }
}

// .kxz-callLog__sel {
//   transform: translateY(-6px);
//   box-shadow: none;
//   background: $inputbgColor;
//   border-color:$bdColor;
//   .el-select-dropdown__list{
//     padding:0;
//   }
//   .el-select-dropdown__item {
//     color: #bac1c9;
//     padding:10px 0 11px 19px;
//     height:auto;
//     &.hover{
//       background:#f1f5f8;
//     }
//   }
// }
</style>
